我是阿傑， 是一個正在好想工作室學習前端的老男孩 (已到了想哭卻哭不出來的年紀了)！
事情是這樣的，在一個風和日麗的早晨，我如往常一樣喝著我的手沖 肯亞AA 冰咖啡，一邊愜意地使用著 MacBook Air 玫瑰金，搭配著我家 mentor (Chris) 跟別人聊天的背景音，沈浸式地過著自以為有質感的生活！剎那間，我感受到周遭氣氛突變，只聽到 Chris 倏地蹦出一句：「我不想跟只會用 for-loop 的人當同事！」，我立馬呆住，因為當下的我也正在使用 for-loop 寫題目！！！雖然感到震驚，但畢竟本人已在職場打滾多年，所以我只是一臉淡定並默默地按下了 cmd + a 跟 ←！只用了 1 秒，我毫不留戀地抹除了一切，彷彿這一切都與我無關 (反正我也沒有用 git 版控，不會留下證據)。
在沉思了一陣子後，我輕輕地打開瀏覽器視窗， Google 了 "array method JavaScript"，呆呆地望著 MDN 跟超級莫名其秒的 ECMAScript！而就在這短短的半小時內，我經歷了衝擊 -> 否認 -> 暴怒 -> 逃避 -> 自我救贖的 PTSD 5 階段，最後在 Chris 的指導下，終於交織出了這一系列關於 Array method 的血淚篇章。
這系列的文章我會先聊聊一些關於 JavaScript 的知識點及 ECMAScript 所用的一些術語，接著就會盡我所能地講解 22 個 Array method，從 MDN 看到 ECMAScript，如果講解有誤，請不吝指正，我會感激涕零！
新手如我通常都會說：我 for-loop 用得頭好壯壯，看起來複雜又厲害，為什麼還需要用別人寫好的東西，我就是要自己造輪子啊，不行嗎？套一句 mentor 說過的話：「可以！ 想辦法說服我就行！」。
OK！那我們就先來看看 for-loop 跟 array-method 到底差在哪：
const names = ['Amber', 'Spencer', 'Andreas'];
for (let i = 0; i < names.length; i++) {
console.log(names[i])
}
// Amber
// Spencer
// Andreas
Array.prototype.forEach
const names = ['Amber', 'Spencer', 'Andreas'];
names.forEach(name => {
console.log(name);
})
// Amber
// Spencer
// Andreas
我知道你想說...
沒關係，再給你一次機會
const ages = [18, 10, 30, 35, 52, 16];
const littleFreshMeats = [];
for (let i = 0; i < ages.length; i++) {
if (ages[i] < 20) {
littleFreshMeats.push(ages[i])
}
}
console.log(littleFreshMeats);
// [18, 10, 16]
Array.prototype.filter
const ages = [18, 10, 30, 35, 52, 16];
const littleFreshMeats = ages.filter(age => age < 20);
console.log(littleFreshMeats);
// [18, 10, 16]
蛤！？你說還是沒差...
我來說說差在哪吧：
我想應該知道為什麼了吧！當然有些狀況還是只能使用 for-loop, 可以參考 Chris 的文章 - 糙 code 出沒請小心!! 在 JavaScript 寫 for-loop 。
如果你還是有這個疑惑，那請務必把這系列文章看完，你可能會產生新的想法 (直接安麗自己的文章XD)，在我們開始看 Array method 之前，我覺得有些事情你可以先知道：
如果你有仔細觀察，會發現 Array method 其實蘊含了不少 JavaScript 的知識點跟特性，比如上面範例的 method 為何都是 Array.prototype... 開頭，而實際的程式碼卻又看不到 prototype 這個屬性！為什麼要在 Array method 裡面定義一個 callback function ？
這些曾經都是讓我夜不能寐的困惑，因此我在這裡列出一些可以先了解的東西並附上參考資源，讓你使用起來更加得心應手，並且我會在Day 2 做一些簡單的介紹：
如果你想從更 high-level 的角度來看待 Array method，那可以嘗試服用 ECMAScript， 俗話說良藥苦口，這邊我會列出幾個你該知道的東西，讓藥不會那麼苦，我也會在 Day 3 ~ Day 5 做一些簡單的介紹：
? and !
可以參考以下資源:
看完是不是想說...
沒事兒沒事兒，Don't worry 耳包 it！你不需要鉅細靡遺地翻閱這些名詞，也不用急著在這短暫的時光弄懂其運作原理，你只需要知道背後有誰參與了整個 Array method 的操作，進而透過學習 Array method 勾勒出較清楚的學習輪廓。
我們會在 Day 2 ~ Day 5 分別簡單聊聊這些東西，之後便會馬拉松式地依序介紹 24 個 Array method。
希望大家可以開心地使用各種咩色，體驗它帶給你的便利。最後，祝大家歸剛沒煩惱！
iThome鐵人賽
看影片追技術